import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  NativeModules,
  TouchableHighlight,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;
const windowWidth = Dimensions.get('window').width;

const SignIn = ({}) => {
  const {t} = useTranslation();
  const onChange = useCallback(
    type => () => {
      console.log(type);
    },
    [],
  );
  return (
    <View style={styles.signIn}>
      <View style={styles.orderTop}>
        <Text style={styles.orderTopText}>{t('account.helpCenter')}</Text>
      </View>
      <View style={styles.orderBottom}>
        <TouchableWithoutFeedback onPress={onChange('address')}>
          <View style={styles.orderBottomItem}>
            <PatIcon name="bale" size={20} color={Colors.patFontGray} />
            <Text style={styles.orderBottomItemText}>
              {t('account.address')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange('payment')}>
          <View style={styles.orderBottomItem}>
            <PatIcon name="transport" size={20} color={Colors.patFontGray} />
            <Text style={styles.orderBottomItemText}>
              {t('account.payment')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange('profile')}>
          <View style={styles.orderBottomItem}>
            <PatIcon name="chat" size={20} color={Colors.patFontGray} />
            <Text style={styles.orderBottomItemText}>
              {t('account.profile')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange('helpCenter')}>
          <View style={styles.orderBottomItem}>
            <PatIcon name="chat" size={20} color={Colors.patFontGray} />
            <Text style={styles.orderBottomItemText}>
              {t('account.helpCenter')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange('feedback')}>
          <View style={styles.orderBottomItem}>
            <PatIcon name="chat" size={20} color={Colors.patFontGray} />
            <Text style={styles.orderBottomItemText}>
              {t('account.feedback')}
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  signIn: {
    marginBottom: 20,
    borderWidth: 0.3,
    borderRadius: 10,
    borderColor: Colors.patFontGray,
    flex: 1,
    borderBottomColor: Colors.patFontGray,
    borderBottomWidth: 0.6,
    marginLeft: 20,
    marginRight: 20,
  },
  orderTop: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingLeft: 10,
    paddingRight: 10,
    alignItems: 'center',
    height: 25,
    flexDirection: 'row',
    borderBottomWidth: 0.2,
    borderBottomColor: Colors.patFontGray,
  },
  orderTopText: {
    fontSize: 10,
    color: Colors.patFontGray,
  },
  orderBottom: {
    paddingTop: 10,
    paddingBottom: 10,
    display: 'flex',
    justifyContent: 'flex-start',
    paddingLeft: 10,
    paddingRight: 10,
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  orderBottomItem: {
    marginBottom: 10,
    width: 80,
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
  },
  orderBottomItemText: {
    marginTop: 5,
    fontSize: 12,
    color: Colors.patFontGray2,
  },
});

export default SignIn;
